<template>
    <a-dropdown placement="bottomLeft" :trigger="['click', 'hover']" :arrow="true">
        <a-button type="text">
            <template #icon>
                <ant-icon-user-outlined />
            </template>
            {{ userInfo.username }}
            <ant-icon-down-outlined :style="{ fontSize: '10px' }" />
        </a-button>
        <template #overlay>
            <a-menu @click="clickMenu">
                <a-menu-item key="1">账号信息</a-menu-item>
                <a-menu-item key="clearcache">清除缓存</a-menu-item>
                <a-divider style="margin: 0;" />
                <a-menu-item key="logout">退出登录</a-menu-item>
            </a-menu>
        </template>
    </a-dropdown>
</template>

<script setup>
import {ref, getCurrentInstance } from 'vue';
import { useTokenStore } from '@/stores/token';
import { useMenusStore } from '@/stores/menus';
import { Modal } from 'ant-design-vue';

const { proxy } = getCurrentInstance()
const tokenStore = useTokenStore()
const menusStore = useMenusStore()

const userInfo = ref(tokenStore.getUserInfo)

const clickMenu = (e) => {
    switch (e.key) {
        case 'logout':
            tokenStore.logout()
            proxy.$router.push('/login')
            proxy.$message.success('退出成功')
            break;
        case 'clearcache':
            Modal.confirm({
                title: '清除缓存',
                content: '清除缓存后，需要重新登录才能生效，确定清除吗？',
                okText: '确定',
                cancelText: '取消',
                onOk: () => {
                    tokenStore.logout()
                    menusStore.clearMenus()
                    menusStore.clearTags()
                    proxy.$router.push('/login')
                    proxy.$message.success('清除缓存成功')
                }
            })
            break;
    }
}


</script>